<template>
	<view class="">
		<u-navbar title="立即发帖" :autoBack="true" bgColor="#fff" :fixed="false"></u-navbar>
		<view class="p-30" style="padding-bottom: 160rpx;">
			<u-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="0" errorType="toast">
				<view class="card">
					<u-form-item label=" " prop="name">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								帖子标题
							</view>
							<view class="">
								<u-input v-model="form.name" border="none" placeholder="请输入帖子标题"></u-input>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					基本信息
				</view>
				<view class="card mt-30">
					<u-form-item label=" " prop="character">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								省市
							</view>
							<view class="flex-row align-center justify-between" style="width: 320rpx;" @click="pickerShow = true">
								<u-input v-model="cityName" disabledColor="#fff" border="none" placeholder="省市"></u-input>									
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " prop="staff_name">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								头像
							</view>
							<view class="">
								<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
									multiple :maxCount="1" multiple width="40" height="40">
									<image :src="add" mode="widthFix" style="width: 40px;height: 40px;"></image>
								</u-upload>
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " prop="staff_name">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								姓名
							</view>
							<view class="">
								<u-input v-model="form.staff_name" border="none" placeholder="请输入姓名"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " prop="weight">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								体重（kg）
							</view>
							<view class="">
								<u-input v-model="form.weight" border="none" placeholder="请输入体重（kg）"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-line color="#F6F6F6"></u-line>
					<u-form-item label=" " prop="height">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								身高（cm）
							</view>
							<view class="">
								<u-input v-model="form.height" border="none" placeholder="请输入身高（cm）"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-line color="#F6F6F6"></u-line>
					<u-form-item label=" " prop="username">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								身材
							</view>
							<view class="">
								<u-input v-model="form.figure" border="none" placeholder="请输入身材"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " prop="character">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								性格
							</view>
							<view class="">
								<u-input v-model="form.character" border="none" placeholder="请输入性格"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " prop="character">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								工作时间
							</view>
							<view class="flex-row align-center justify-between" style="width: 320rpx;">
								<view class="" style="width: 48%;" @click="clickTime('start');">
									<u-input v-model="form.starttime" disabledColor="#fff" border="none" placeholder="上班时间"></u-input>
								</view>
								<view class="" style="width: 48%;" @click="clickTime('end');">
									<u-input v-model="form.endtime" disabledColor="#fff" border="none" placeholder="下班时间"></u-input>
								</view>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					联系信息
				</view>
				<view class="card mt-30">
					<u-form-item label=" " prop="mobile">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								联系方式
							</view>
							<view class="">
								<u-input v-model="form.mobile" border="none" placeholder="请输入手机号或者微信号"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " prop="address">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								地址
							</view>
							<view class="">
								<u-input v-model="form.address" border="none" placeholder="请输入地址"></u-input>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					服务项目
				</view>
				<view class="card mt-30">
					<u-form-item label=" ">
						<view class="flex-column w-full">
							<view class="fw-700">
								擅长项目
							</view>
							<view class="tag mt-30">
								<view class="tag-item" @click.stop="tagClick(index)" :class="{'active':item.checked}"
									v-for="(item,index) in serveData1">
									{{item.name}}
								</view>
							</view>
						</view>
					</u-form-item>
					<u-line color="#F6F6F6"></u-line>
					<u-form-item label=" ">
						<view class="flex-column w-full">
							<view class="fw-700">
								主推项目
							</view>
							<view class="tag mt-30">
								<view class="tag-item" @click.stop="tagClick1(index)" :class="{'active':item.checked}"
									v-for="(item,index) in serveData2">
									{{item.name}}
								</view>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					详情说明
				</view>
				<view class="card mt-30" style="padding: 30rpx;">
					<u-form-item label="" prop="content">
						<view class="flex-row w-full">
							<u-textarea v-model="form.content" placeholder="请输入详情说明"></u-textarea>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					相似度
				</view>
				<view class="card mt-30 flex-row align-center" style="padding: 30rpx;">
					<u-rate count="5" v-model="form.value" activeColor="#FF9A68"></u-rate>
					<view style="color: #FF9A68;">5.0</view>
				</view>
				<view class="title mt-30">
					技师评价
				</view>
				<view class="card mt-30" style="padding: 30rpx;">
					<u-form-item label="" prop="evaluate">
						<view class="flex-row w-full">
							<u-textarea v-model="form.evaluate" placeholder="请输入评价"></u-textarea>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					照片
				</view>
				<view class="card mt-30" style="padding: 30rpx;">
					<view class="flex-row w-full">
						<view class="">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="1"></u-upload>
							<view class="text-center mt-10 small-size">添加图片</view>
						</view>
					</view>
				</view>
			</u-form>
		</view>
		<view class="submit" @click="submit">
			<u-button :loading="loading" :color="$u.color.color" shape="circle">立即发布</u-button>
		</view>
		<u-datetime-picker @cancel="timeCancel" @confirm="timeConfirm" :show="timeShow" v-model="time"
			mode="time"></u-datetime-picker>
		<u-picker :show="pickerShow" ref="uPicker" :loading="pickerLoading" :columns="columns" @change="changeHandler"
			keyName="name" @confirm="pickerConfirm" @cancel="pickerShow = false"></u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		post,
		staffInfo
	} from '@/common/api.js'
	import {
		baseUrl
	} from '@/common/config.js'

	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				pickerShow:false,
				staff: null,
				loading: false,
				fileList1: [],
				fileList2: [],
				no: "",
				timeShow: false,
				time: "",
				timeType:"",
				cityName:"",
				form: {
					avatar: "",
					service_ids: "",
					service1_ids: "",
					height: "",
					weight: "",
					age: "",
					figure: "",
					character: "",
					starttime: "",
					endtime: "",
					content: "",
					staff_name: "",
					name: '',
					evaluate: "",
					image: "",
					value: 2,
					address: '',
					mobile: "",
					province:""
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					},
					staff_name: {
						type: 'string',
						required: true,
						message: '请输入技师名称',
						trigger: ['blur', 'change']
					},
					weight: {
						type: 'string',
						required: true,
						message: '请输入体重',
						trigger: ['blur', 'change']
					},
					height: {
						type: 'string',
						required: true,
						message: '请输入身高',
						trigger: ['blur', 'change']
					},
					age: {
						type: 'string',
						required: true,
						message: '请输入年龄',
						trigger: ['blur', 'change']
					},
					figure: {
						type: 'string',
						required: true,
						message: '请输入身材',
						trigger: ['blur', 'change']
					},
					character: {
						type: 'string',
						required: true,
						message: '请输入性格',
						trigger: ['blur', 'change']
					},

					description: {
						type: 'string',
						required: true,
						message: '请输入说明',
						trigger: ['blur', 'change']
					},
					evaluate: {
						type: 'string',
						required: true,
						message: '请输入评价',
						trigger: ['blur', 'change']
					},
					image: {
						type: 'string',
						required: true,
						message: '请上传图片',
						trigger: ['blur', 'change']
					},
					mobile: [{
							required: true,
							message: '请输入联系方式',
							trigger: ['change', 'blur'],
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		// 上面有说，返回true表示校验通过，返回false表示不通过
						// 		// uni.$u.test.mobile()就是返回true或者false的
						// 		return uni.$u.test.mobile(value);
						// 	},
						// 	message: '联系方式不正确',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change', 'blur'],
						// }
					],
				},
				serveData1: [],
				serveData2: []
			}
		},
		computed: {
			...mapState(["serveData"])
		},
		onLoad() {
			this.serveData1 = JSON.parse(JSON.stringify(this.serveData));
			this.serveData1 = this.serveData1.map(item => {
				item.checked = false
				return item
			});
			this.serveData2 = JSON.parse(JSON.stringify(this.serveData));
			this.serveData2 = this.serveData2.map(item => {
				item.checked = false
				return item
			})
			console.log('this.serveData1', this.serveData1);
		},
		methods: {
			clickTime(type) {
				this.timeType = type;
				this.timeShow = true;
				uni.hideKeyboard();
			},
			timeConfirm(e) {
				if(this.timeType == 'start') {
					this.form.starttime = e.value
				}else {
					this.form.endtime = e.value
				}
				this.timeShow = false
			},
			timeCancel() {
				this.timeShow = false
			},
			tagClick(index) {
				this.serveData1 = this.serveData1.map((v, i) => {
					if (index == i) v.checked = !v.checked
					return v;
				})
				// this.serveData1[index].checked = !this.serveData1[index].checked
				// console.log(this.serveData1[index]);
			},
			tagClick1(index) {
				this.serveData2 = this.serveData2.map((v, i) => {
					if (index == i) v.checked = !v.checked
					return v;
				})
			},
			getStaff() {
				console.log('sssss');
				staffInfo({
					data: {
						no: this.no
					}
				}).then(res => {
					console.log('res', res);
					this.staff = res
					this.form.staff_id = res.id
				})
			},
			pickerConfirm(e) {
				console.log('confirm', e);
				this.cityName = e.value[0]['name'] + '/' + e.value[1]['name'] + '/' + e.value[2]['name']
				console.log(this.form.register_city);
				this.form.province = e.value[0]['value'];
				this.form.city = e.value[1]['value'];
				console.log('this.form.city',this.form);
				this.pickerShow = false
			},
			submit() {
				let vm = this;
				this.$refs.form.validate().then(res => {
					let service_ids = this.serveData1.filter(v => v.checked);
					if (service_ids.length == 0) {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请选择擅长项目',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					} else {
						this.form.service_ids = service_ids.map(v => {
							return v.id
						});
						this.form.service_ids = this.form.service_ids.toString();
					}

					let service1_ids = this.serveData2.filter(v => v.checked);
					if (service1_ids.length == 0) {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请选择主推项目',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					} else {
						this.form.service1_ids = service1_ids.map(v => {
							return v.id
						});
						this.form.service1_ids = this.form.service1_ids.toString();
					}
					if (this.fileList2.length != 0) {
						this.form.avatar = this.fileList2[0]['url']
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请上传头像',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					}

					if (this.fileList1.length != 0) {
						this.form.image = this.fileList1[0]['url']
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: '请上传图片',
							complete() {
								vm.loading = false;
							}
						})
						return false;
					}

					post(this.form).then(res => {
						console.log('res', res);
						vm.$refs.uToast.show({
							type: 'success',
							message: '提交成功，请等待管理员审核...',
							complete() {
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/index'
								})
							}
						})
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					vm.loading = false;
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 0 30rpx;
	}

	.tag {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// justify-content: space-between;


		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>